<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!--  
        1. 事件绑定
            * 事件属性
            *   <开始标签  事件属性名="js代码" >
            *   
            * 对象属性
            *   对象.事件属性名 = js代码
            *   
            * 事件监听
            *   老IE: 对象.attachEvent('on事件', 函数名)
            *   非IE: 对象.addEventListener('事件', 函数名)

        2. 解除绑定
            * 对象.事件属性名 = null
            *
            * 对象.事件属性名 = function(){  }
            *
            * 老IE:  对象.detachEvent('on事件', 函数名)
            * 非IE:  对象.removeEventListener('事件', 函数名)

    -->

    <!-- 事件属性 -->
    <button id="btn1" onclick="alert('按我一下, 我就怀孕了')">按钮1</button>

    
    <!-- 对象属性 -->
    <button id="btn2">按钮2</button>
    <script>
        var btn2 = document.getElementById('btn2');

        btn2.onclick = function(){
            alert('点我一下, 怀了双胞胎');
        }
    </script>


    <button id="btn3">按钮3</button>
    <script>
        var btn3 = document.getElementById('btn3');

        btn3.addEventListener('click', demo);

        function demo(){
            console.log('监听一下, 发现赵云鹏有8个女朋友');
        }
    </script>


    <script>
        // 解绑事件 
        var btn1 = document.getElementById('btn1');
        
        btn1.onclick = null;
        btn1.onclick = function(){}
        btn3.removeEventListener('click', demo);


    </script>







</body>
</html>